<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap各种样式的翻页组件</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            padding: 30px;
            background-color: #f8f9fa;
        }
        
        .container {
            max-width: 1200px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .pagination-example {
            background-color: #fff;
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        .example-title {
            font-size: 1.25rem;
            margin-bottom: 20px;
            color: #212529;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .example-description {
            color: #6c757d;
            margin-bottom: 20px;
            font-size: 0.95rem;
        }
        
        /* 自定义分页样式 */
        .pagination-custom-1 .page-item.active .page-link {
            background-color: #25d366;
            border-color: #25d366;
        }
        
        .pagination-custom-2 .page-item.active .page-link {
            background-color: #1da1f2;
            border-color: #1da1f2;
        }
        
        .pagination-custom-3 .page-item.active .page-link {
            background-color: #6c757d;
            border-color: #6c757d;
        }
        
        .pagination-custom-4 .page-item.active .page-link {
            background-color: #dc3545;
            border-color: #dc3545;
        }
        
        .pagination-outline .page-link {
            background-color: transparent;
        }
        
        .pagination-square .page-link {
            border-radius: 0;
        }
        
        .pagination-round .page-link {
            border-radius: 20px;
        }
        
        .pagination-condensed .page-link {
            padding: 0.25rem 0.65rem;
        }
        
        .pagination-large .page-link {
            padding: 0.75rem 1.5rem;
            font-size: 1.25rem;
        }
        
        .pagination-with-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .pagination-info {
            color: #6c757d;
            font-size: 0.9rem;
        }
        
        .pagination-align-center {
            display: flex;
            justify-content: center;
        }
        
        .pagination-align-right {
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>Bootstrap 各种样式的翻页组件</h1>
            <p class="text-muted">展示不同风格、尺寸和功能的分页设计</p>
        </div>
        
        <!-- 示例1：基础分页 -->
        <div class="pagination-example">
            <h3 class="example-title">1. 基础分页样式</h3>
            <p class="example-description">Bootstrap默认分页组件，包含页码、上一页和下一页按钮</p>
            <nav aria-label="基础分页">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">1</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 示例2：带省略号的分页 -->
        <div class="pagination-example">
            <h3 class="example-title">2. 带省略号的分页</h3>
            <p class="example-description">当页数较多时，使用省略号表示中间的页码</p>
            <nav aria-label="带省略号的分页">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">1</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item disabled"><span class="page-link">...</span></li>
                    <li class="page-item"><a class="page-link" href="#">8</a></li>
                    <li class="page-item"><a class="page-link" href="#">9</a></li>
                    <li class="page-item"><a class="page-link" href="#">10</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 示例3：仅上一页/下一页 -->
        <div class="pagination-example">
            <h3 class="example-title">3. 仅包含上一页和下一页的分页</h3>
            <p class="example-description">简洁的分页样式，只显示上一页和下一页按钮</p>
            <nav aria-label="简易分页">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                            <i class="fas fa-chevron-left"></i> 上一页
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            下一页 <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 示例4：不同颜色的分页 -->
        <div class="pagination-example">
            <h3 class="example-title">4. 不同颜色的分页</h3>
            <p class="example-description">自定义颜色的分页组件，适用于不同主题的网站</p>
            
            <div class="mb-4">
                <p class="text-muted mb-2">成功色分页</p>
                <nav aria-label="成功色分页">
                    <ul class="pagination pagination-custom-1">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div class="mb-4">
                <p class="text-muted mb-2">信息色分页</p>
                <nav aria-label="信息色分页">
                    <ul class="pagination pagination-custom-2">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div class="mb-4">
                <p class="text-muted mb-2">深色分页</p>
                <nav aria-label="深色分页">
                    <ul class="pagination pagination-custom-3">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div>
                <p class="text-muted mb-2">危险色分页</p>
                <nav aria-label="危险色分页">
                    <ul class="pagination pagination-custom-4">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        
        <!-- 示例5：不同形状的分页 -->
        <div class="pagination-example">
            <h3 class="example-title">5. 不同形状的分页</h3>
            <p class="example-description">不同边框样式的分页组件，包括默认、方形和圆形</p>
            
            <div class="mb-4">
                <p class="text-muted mb-2">默认圆角分页</p>
                <nav aria-label="默认圆角分页">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div class="mb-4">
                <p class="text-muted mb-2">方形分页</p>
                <nav aria-label="方形分页">
                    <ul class="pagination pagination-square">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div>
                <p class="text-muted mb-2">圆形分页</p>
                <nav aria-label="圆形分页">
                    <ul class="pagination pagination-round">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        
        <!-- 示例6：不同尺寸的分页 -->
        <div class="pagination-example">
            <h3 class="example-title">6. 不同尺寸的分页</h3>
            <p class="example-description">不同大小的分页组件，适用于不同场景</p>
            
            <div class="mb-4">
                <p class="text-muted mb-2">紧凑分页</p>
                <nav aria-label="紧凑分页">
                    <ul class="pagination pagination-condensed">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div>
                <p class="text-muted mb-2">大型分页</p>
                <nav aria-label="大型分页">
                    <ul class="pagination pagination-large">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        
        <!-- 示例7：带信息的分页 -->
        <div class="pagination-example">
            <h3 class="example-title">7. 带信息的分页</h3>
            <p class="example-description">包含分页信息（如当前显示条数、总条数）的分页组件</p>
            <div class="pagination-with-info">
                <div class="pagination-info">
                    显示 1-10 条，共 246 条记录
                </div>
                <nav aria-label="带信息的分页">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item disabled"><span class="page-link">...</span></li>
                        <li class="page-item"><a class="page-link" href="#">25</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
                <div>
                    <select class="form-select form-select-sm" style="width: auto;">
                        <option>10条/页</option>
                        <option>20条/页</option>
                        <option>50条/页</option>
                        <option>100条/页</option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- 示例8：不同对齐方式的分页 -->
        <div class="pagination-example">
            <h3 class="example-title">8. 不同对齐方式的分页</h3>
            <p class="example-description">左对齐、居中对齐和右对齐的分页组件</p>
            
            <div class="mb-4">
                <p class="text-muted mb-2">左对齐分页（默认）</p>
                <nav aria-label="左对齐分页">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div class="mb-4">
                <p class="text-muted mb-2">居中对齐分页</p>
                <nav aria-label="居中对齐分页">
                    <ul class="pagination pagination-align-center">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <div>
                <p class="text-muted mb-2">右对齐分页</p>
                <nav aria-label="右对齐分页">
                    <ul class="pagination pagination-align-right">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        
        <!-- 示例9：轮廓样式分页 -->
        <div class="pagination-example">
            <h3 class="example-title">9. 轮廓样式分页</h3>
            <p class="example-description">透明背景的轮廓样式分页组件</p>
            <nav aria-label="轮廓样式分页">
                <ul class="pagination pagination-outline">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                    </li>
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">1</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 示例10：带图标的分页 -->
        <div class="pagination-example">
            <h3 class="example-title">10. 带图标的分页</h3>
            <p class="example-description">使用Font Awesome图标增强视觉效果的分页组件</p>
            <nav aria-label="带图标的分页">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                            <i class="fas fa-angle-double-left me-1"></i> 第一页
                        </a>
                    </li>
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
                            <i class="fas fa-angle-left me-1"></i> 上一页
                        </a>
                    </li>
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">1</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            下一页 <i class="fas fa-angle-right ms-1"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            最后一页 <i class="fas fa-angle-double-right ms-1"></i>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 为演示目的，添加分页交互功能
        document.querySelectorAll('.page-link:not(.disabled .page-link)').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 如果点击的是页码，更新当前页
                if (this.parentElement.classList.contains('page-item') && 
                    !this.parentElement.classList.contains('disabled') &&
                    !this.parentElement.classList.contains('active')) {
                    
                    // 移除所有active类
                    document.querySelectorAll('.page-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    // 为当前点击项添加active类
                    this.parentElement.classList.add('active');
                    
                    // 更新上一页按钮状态
                    const firstPage = document.querySelector('.pagination li:first-child');
                    const prevPage = document.querySelector('.pagination li:nth-child(2)');
                    
                    if (this.textContent === '1') {
                        firstPage.classList.add('disabled');
                        prevPage.classList.add('disabled');
                    } else {
                        firstPage.classList.remove('disabled');
                        prevPage.classList.remove('disabled');
                    }
                }
            });
        });
    </script>
</body>
</html>
    
